<!-- 用于给外部页面iframe的 -->
<template>
  <div class="all">
    <div id="app-container">
      <div class="main">
        <div class="topNavi">
          <div class="topNaviItem">
            <div class="backBtn">
              <!-- <img :src="backBtn" alt="" /> -->
            </div>
            <div class="naviPositionName">{{ positionName }}</div>
            <div class="fatherTitleName">{{ positionFatherName }}</div>
            <!-- <div class="collect" :class="collectStatus ? 'collected' : ''" @click="clickCollect">
              <img src="../../assets/home/whiteCollect.png" />
              <p>{{ collectStatus ? "已关注" : "关注" }}</p>
            </div> -->
          </div>
        </div>
        <div class="mainContent">
          <div class="menu">
            <el-menu
              :default-active="defaultActive"
              :default-openeds="openeds"
              @select="handleSelect"
              @open="handleOpen"
              @close="handleClose"
              :collapse="false"
            >
              <template v-for="(item, index) in allLayerList">
                <el-submenu
                  :index="item.layerId"
                  :key="item.layerId"
                  v-if="handleMenuShow(index)"
                >
                  <template slot="title">
                    <span>
                      <img
                        class="menuIcon"
                        :src="
                          currentFatherTab == item.layerId
                            ? menuIconActiveParams[currentFatherTab]
                            : menuIconNormalParams[item.layerId]
                        "
                      />
                      {{ item.title }}
                    </span>
                  </template>
                  <el-menu-item
                    v-for="childrenItem in item.children"
                    :index="childrenItem.layerId"
                    :key="childrenItem.layerId"
                    >{{ childrenItem.title }}</el-menu-item
                  >
                </el-submenu>
              </template>
            </el-menu>
          </div>
          <div id="content">
            <careerOverview
              v-if="currentTab == '1'"
              ref="careerOverview"
              :allLayerList="allLayerList"
            />
            <salaryOverview
              v-else-if="currentTab == '41'"
              :allLayerList="allLayerList"
            />
            <RecruitmentOverview
              v-else-if="currentTab == '74'"
              :allLayerList="allLayerList"
            />
            <careerProspects
              v-else-if="currentTab == '34'"
              :allLayerList="allLayerList"
            />
            <generalLayerComponet
              v-else
              :allLayerList="allLayerList"
              :currentTab="currentTab"
            />
            <div
              class="scrollToTop"
              v-if="scrollToTopBtn"
              @click="scrollTopTopClick()"
            >
              <div class="top-icon"></div>
              <div class="small">TOP</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import JSZip from "jszip";
import FileSaver from "file-saver";
import {
  batchSaveAnswer,
  getProfessionTreeByTitle,
  addPositionCollect,
  delPositionCollect,
  judgeCollectStatus,
  homepageLayer,
} from "@/api/position-detail";
import { queryReports, createReports } from "@/api/mine";
import Websocket from "@/components/Websocket";
import careerOverview from "@/views/position/careerOverview";
import salaryOverview from "@/views/position/salaryOverview";
import RecruitmentOverview from "@/views/position/RecruitmentOverview";
import careerProspects from "@/views/position/careerProspects";
import generalLayerComponet from "@/views/position/generalLayerComponet";
import VueCookies from "vue-cookies";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import searchBox from "../home/components/searchBox";

export default {
  name: "Detail",
  components: {
    Websocket,
    Editor,
    Toolbar,
    searchBox,
    careerOverview,
    salaryOverview,
    RecruitmentOverview,
    careerProspects,
    generalLayerComponet,
  },
  data() {
    return {
      careerOverviewWrapperDom: "",
      pageTitle:
        localStorage.getItem("superToken") ==
          "407404EAEC845F1B91A104B80FE86D89" ||
        localStorage.getItem("superToken") == "5FD271D8A0AA315DD218801C0C3A0DEA"
          ? "一览职业大全"
          : "职神籍",
      clickInputOutside: false,
      collectStatus: null,
      inputData: "",
      specialHidden: true,
      positionFatherName: "",
      token: "",
      menuIconList: [
        require("../../assets/detail/menuIcon/train@2x.png"),
        require("../../assets/detail/menuIcon/trainSelected@2x.png"),
        require("../../assets/detail/menuIcon/sal@2x.png"),
        require("../../assets/detail/menuIcon/salSelected@2x.png"),
        require("../../assets/detail/menuIcon/recruit@2x.png"),
        require("../../assets/detail/menuIcon/recruitSelected@2x.png"),
        require("../../assets/detail/menuIcon/position@2x.png"),
        require("../../assets/detail/menuIcon/positionSelected@2x.png"),
      ],
      menuIconActiveParams: {
        1: require("../../assets/detail/menuIcon/trainSelected@2x.png"),
        41: require("../../assets/detail/menuIcon/salSelected@2x.png"),
        74: require("../../assets/detail/menuIcon/recruitSelected@2x.png"),
        34: require("../../assets/detail/menuIcon/positionSelected@2x.png"),
      },
      menuIconNormalParams: {
        1: require("../../assets/detail/menuIcon/train@2x.png"),
        41: require("../../assets/detail/menuIcon/sal@2x.png"),
        74: require("../../assets/detail/menuIcon/recruit@2x.png"),
        34: require("../../assets/detail/menuIcon/position@2x.png"),
      },
      editData: {
        editNum: "0",
        editPerson: "",
        editTime: "",
        contributePersonList: [],
      },
      selectedNav: "",
      infoName: {
        def: { name: "岗位定义", order: 0 },
        task: { name: "工作内容", order: 1 },
        skill: { name: "推荐技能", order: 2 },
        book: { name: "推荐书籍", order: 3 },
        tool: { name: "推荐工具", order: 4 },
      },
      backBtn: require("../../icons/backBtn.png"),
      info: [],
      // selfInfo: [],
      currentPositionName: "",
      positionName: "",
      positionId: 0,
      currentButton: null,
      chatKey: "",
      loading: false,
      isContinue: false,
      aiCreateStatus: false,
      isStoped: false,
      // rebotBg: true,
      messageList: [],
      messages: [],
      // showError: false,
      // historyChatKey: "",
      // isShowMore: false,
      // currentMsg: "",
      currentRole: "",
      // userId: "",
      // userName: "",
      currentTab: "61",
      currentFatherTab: "1",
      openeds: ["1", "2", "3", "4", "5"],
      isAdmin: true,
      // editor: null,
      // toolbarConfig: {},
      // editorConfig: {
      //   placeholder: "请输入内容...",
      //   scroll: true,
      // },
      // mode: "simple", // or 'simple'
      isClickScroll: false,
      editAll: false,
      scrollToTopBtn: false,
      openAtLeastOneEdit: false,
      isSuperToken: false,
      isProducing: false,
      preDownloadUrlList: [],
      downloadUrlList: [],
      allLayerList: [],
      showItemParams: {
        showIntro: false, //职业简介
        showEnvironment: false, //工作环境
        showWorth: false, //职业价值
        showCrowd: false, //适用人群
        showTotalSarlary: false, //整体水平
        showDetailSalary: false, //薪酬分析
      },
      defaultActive: "61",
      customerDesc: "",
      showMenu: "",
    };
  },
  mounted() {
    this.isSuperToken =
      localStorage.getItem("superToken") ==
        "407404EAEC845F1B91A104B80FE86D89" ||
      localStorage.getItem("superToken") == "5FD271D8A0AA315DD218801C0C3A0DEA";
    document.title = this.pageTitle + "-" + this.positionName;
    if (
      this.$route.query.superToken == "407404EAEC845F1B91A104B80FE86D89" ||
      this.$route.query.superToken == "5FD271D8A0AA315DD218801C0C3A0DEA"
    ) {
      this.specialHidden = false;
    }
    //不知道监听什么历史代码
    window.addEventListener("click", this.listenerChangeFlag);
    //监听页面滚动，动态显示置顶按钮
    setTimeout(() => {
      this.careerOverviewWrapperDom = document.querySelector(
        ".careerOverviewWrapper"
      );
      this.careerOverviewWrapperDom.addEventListener(
        "scroll",
        this.handleScroll
      );
    }, 2000);
  },
  beforeDestroy() {
    window.removeEventListener("click", this.listenerChangeFlag);
    if (this.careerOverviewWrapperDom.removeEventListener) {
      this.careerOverviewWrapperDom.removeEventListener(
        "scroll",
        this.handleScroll
      );
    }
  },
  created() {
    if (this.$route.query.SecretKey || localStorage.getItem("SecretKey")) {
      let SecretKey =
        this.$route.query.SecretKey || localStorage.getItem("SecretKey");
      localStorage.setItem("SecretKey", SecretKey);
    } else {
      let SecretKey = "94cbe78f3bcec8be2a4b0ac87a31ba7c";
      localStorage.setItem("SecretKey", SecretKey);
    }
    if (this.$route.query.token) {
      let token = this.$route.query.token;
      localStorage.setItem("token", `Bearer ${token}`);
    }
    this.positionId = this.$route.query.id;
    this.positionName = this.$route.query.name;
    this.showMenu = this.$route.query.showMenu || "";
    this.getFatherName(this.positionName);
    this.getAllLayers();
    this.token = JSON.parse(localStorage.getItem("userInfo")).token;
    if (localStorage.getItem("customerDesc")) {
      this.customerDesc = localStorage.getItem("customerDesc");
      document.title = this.customerDesc;
    }
  },
  watch: {
    info: {
      handler(newValue) {
        var noneEdit = newValue.some(function (item) {
          return item.currentEdit;
        });
        if (!noneEdit) {
          this.editAll = false;
          this.openAtLeastOneEdit = false;
        } else {
          this.openAtLeastOneEdit = true;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleMenuShow(index) {
      if (this.showMenu) {
        if (this.showMenu.indexOf(index + 1) != -1) {
          return true;
        } else {
          return false;
        }
      } else {
        return true;
      }
    },
    async handleDownload() {
      if (this.isProducing) return;
      this.isProducing = true;
      this.createReportsFn();
      const params = [
        {
          ylPositionId: this.positionId,
          reportTypeList: [
            "training_development_report",
            // "recruitment_allocation_report",
            // "compensation_incentive_report",
          ],
        },
      ];
      setTimeout(async () => {
        const res = await queryReports(params);
        this.isProducing = false;
        if (res.code == 200) {
          const temp = [];
          res.data.forEach((item) => {
            temp.push(item.reportUrl);
          });
          // this.preDownloadUrlList = temp;
          this.preDownloadUrlList = [
            "http://oatestv2.crm1001.com/api-file/file/getUrlById?id=1700075525315235842",
            "http://oatestv2.crm1001.com/api-file/file/getUrlById?id=1700075711592665090",
          ];
          this.batchGetDownloadUrl();
        }
      }, 3500);
    },
    async createReportsFn() {
      const params = {
        reportTypeList: [
          "training_development_report",
          // "recruitment_allocation_report",
          // "compensation_incentive_report",
        ],
        ylPositionIdList: [this.positionId],
      };
      await createReports(params);
    },
    // 把路径指向文件转成ArrayBuffer对象
    getFile(url) {
      return new Promise((resolve, reject) => {
        axios({
          method: "get",
          url,
          headers: { Authorization: this.token },
          responseType: "arraybuffer",
        })
          .then((data) => {
            resolve(data.data);
          })
          .catch((error) => {
            reject(error.toString());
          });
      });
    },
    //批量下载方法
    batchDownload(urlList) {
      const cache = {};
      const promises = [];
      const zip = new JSZip();
      urlList.forEach((item) => {
        const promise = this.getFile(item).then((data) => {
          const arr_name = item.split("/");
          const file_name = arr_name[arr_name.length - 1]; // 获取文件名
          zip.file(file_name, data, { binary: true }); // 逐个添加文件
          cache[file_name] = data;
        });
        promises.push(promise);
      });
      Promise.all(promises).then(() => {
        zip.generateAsync({ type: "blob" }).then((content) => {
          // 生成二进制流
          FileSaver.saveAs(content, `${this.positionName}.zip`); // 利用file-saver保存文件
        });
      });
    },
    // 批量获取下载url
    batchGetDownloadUrl() {
      const promises = [];
      this.preDownloadUrlList.forEach((url) => {
        const promise = this.singleDownload(url);
        promises.push(promise);
      });
      Promise.all(promises).then((res) => {
        console.log(res, "-----------");
        this.batchDownload(res);
      });
    },
    singleDownload(url) {
      return new Promise((resolve, reject) => {
        axios({
          method: "get",
          url,
          headers: { Authorization: this.token },
        })
          .then((res) => {
            resolve(res.data.data);
          })
          .catch((err) => {
            reject(err.toString());
          });
      });
    },
    download(url) {
      axios({
        url,
        method: "get",
        headers: { Authorization: this.token },
      }).then((res) => {
        if (res.data.code == 200) {
          const link = document.createElement("a");
          link.style.display = "none";
          link.href = res.data.data;
          link.download = "我是一个文件名字";
          document.body.appendChild(link);
          link.click();
          setTimeout(() => {
            link.remove();
          }, 1000);
        }
      });
    },
    handleMine() {
      this.$router.push({
        path: "/mine",
        query: {
          id: this.$route.query.id,
          superToken: this.$route.query.superToken || "",
          SecretKey: this.$route.query.SecretKey || "",
          customerName: this.$route.query.customerName,
        },
      });
    },
    getAllLayers() {
      const params = {
        id: this.positionId,
      };
      homepageLayer(params)
        .then((res) => {
          if (res.code == 200) {
            this.allLayerList = res.data;
            this.$set(this, "allLayerList", res.data);
            //console.log("我都更新了！！", this.allLayerList);

            this.defaultActive = this.allLayerList[0].children[0].layerId + "";
            this.currentTab = this.allLayerList[0].layerId + "";

            this.showItemConfiger();
          }
        })
        .catch((err) => {
          //console.log("err", err);
          this.$message.error("服务器开小差啦");
        });
    },
    showItemConfiger() {
      this.allLayerList.forEach((item, index) => {
        item.children.forEach((subItem, subIndex) => {
          if (subItem.layerId === "61") {
            //二级维度职业简介
            this.showItemParams.showIntro = true;
          }
          if (subItem.layerId === "8") {
            //二级维度工作环境
            this.showItemParams.showEnvironment = true;
          }
          if (subItem.layerId === "21") {
            this.showItemParams.showWorth = true;
          }
          if (subItem.layerId === "67") {
            this.showItemParams.showCrowd = true;
          }
          if (subItem.layerId === "83") {
            //二级维度薪酬整体水平
            this.showItemParams.showTotalSarlary = true;
          }
          if (subItem.layerId === "42") {
            //二级维度薪酬分析
            this.showItemParams.showDetailSalary = true;
          }
        });
      });
    },
    clickCollect() {
      if (this.collectStatus) {
        delPositionCollect({
          positionId: this.positionId,
        }).then((res) => {
          if (res.code == 200) {
            //console.log("取关成功");
            this.$message({
              type: "success",
              message: "已取消关注",
            });
          }
        });
      } else {
        addPositionCollect({
          positionId: this.positionId,
        }).then((res) => {
          if (res.code == 200) {
            //console.log("添加成功");
            this.$message({
              type: "success",
              message: "已添加关注",
            });
          }
        });
      }
      this.collectStatus = !this.collectStatus;
    },
    getFatherName(name) {
      getProfessionTreeByTitle({
        positionId: this.positionId,
      }).then((res) => {
        if (res.code == 200) {
          if (res.data) {
            this.positionFatherName = `${res.data.topTitle} · ${res.data.parentTitle}`;
          } else {
            this.positionFatherName = "暂无分类";
          }
        }
      });
    },
    listenerChangeFlag(e) {
      let nowClassName = e.target.className;
      if (nowClassName != "search" && nowClassName != "el-input__inner") {
        this.$refs.searchBox && this.$refs.searchBox.clickInputOutside();
      }
    },
    handleLogoClick() {
      this.$router.push({
        path: "/position",
        query: {
          superToken: this.$route.query.superToken || "",
          SecretKey: this.$route.query.SecretKey || "",
          customerName: this.$route.query.customerName || "",
        },
      });
    },
    handleBackBtnClick() {
      this.$router.push({
        path: "/position",
        query: {
          superToken: this.$route.query.superToken || "",
        },
      });
    },
    getInputData(inputData) {
      this.inputData = inputData;
      this.getSearchList();
    },
    handleOpen(val) {
      console.log(this.currentTab + "");
    },
    handleClose(val) {
      console.log(val);
    },
    handleSelect(val, values) {
      const isDiffirentTab = this.currentTab != values[0];
      this.currentTab = values[0] + "";
      // //console.log("values", values);

      const selectedChildLayerId = values[1];

      this.allLayerList.forEach((item, index) => {
        if (item.layerId == this.currentTab) {
          item.children.forEach((_item, _index) => {
            if (_item.layerId == selectedChildLayerId) {
              if (isDiffirentTab) {
                setTimeout(() => {
                  var el = document.getElementById(
                    "menuScroll" + index + "-" + _index
                  );
                  if (el) {
                    el.scrollIntoView({
                      behavior: "smooth",
                      block: "start",
                      inline: "nearest",
                    });
                    this.$bus.$emit("menuSetRightNavActive", _index);
                  }
                }, 1000);
              } else {
                var el = document.getElementById(
                  "menuScroll" + index + "-" + _index
                );

                if (el) {
                  el.scrollIntoView({
                    behavior: "smooth",
                    block: "start",
                    inline: "nearest",
                  });
                  this.$bus.$emit("menuSetRightNavActive", _index);
                }
              }
            }
          });
        }
      });
      this.aiCreateStatus = false;
      let textEl = document.querySelectorAll(".AIBtn");
      textEl.forEach((item) => {
        item.classList.remove("AILoading");
      });
      if (values[0]) {
        this.currentFatherTab = values[0];
      }

      this.scrollToTopBtn = false;
      this.careerOverviewWrapperDom.removeEventListener(
        "scroll",
        this.handleScroll
      );
      setTimeout(() => {
        this.careerOverviewWrapperDom = document.querySelector(
          ".careerOverviewWrapper"
        );
        this.careerOverviewWrapperDom.addEventListener(
          "scroll",
          this.handleScroll
        );
      }, 2000);
    },
    adminInit() {
      const userToken = VueCookies.get("vue_admin_template_token");
      if (userToken === "admin-token") {
        this.isAdmin = true;
      }
    },
    judgeCollect() {
      judgeCollectStatus({ id: this.positionId }).then((res) => {
        if (res.code == 200) {
          this.collectStatus = res.data;
        }
      });
    },
    //全部编辑
    changeEditStatus() {
      if (this.isAdmin) {
        if (this.editAll) {
          this.$refs.careerOverview.changeEditStatus(false);
          this.editAll = false;
        } else {
          this.$refs.careerOverview.changeEditStatus(true);
          this.editAll = true;
        }
      }
    },
    saveAll() {
      let params = [];
      this.info.forEach((item) => {
        if (item.allContent != item.content.replace(/<br>/g, "\n")) {
          params.push({
            ylPositionId: this.positionId,
            questionId: item.columnCode,
            answerContent: item.allContent,
          });
        }
      });
      if (params.length > 0) {
        this.$confirm("此操作将覆盖原有内容, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.editAll = false;
            batchSaveAnswer(params)
              .then((res) => {
                if (res.code == 200) {
                  this.info.forEach((item) => {
                    item.content = item.allContent.replace(/\n/g, "<br>");
                    item.currentEdit = false;
                  });
                  this.$message({
                    message: "保存全部成功！",
                    type: "success",
                    duration: 5 * 1000,
                  });
                }
              })
              .catch(() => {
                this.$message({
                  type: "error",
                  message: "修改失败，请重试",
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消修改",
            });
          });
      } else {
        this.editAll = false;
        this.info.forEach((item) => {
          item.currentEdit = false;
        });
        this.$message({
          type: "success",
          message: "修改信息无变化!",
        });
      }
    },
    scrollTopTopClick() {
      this.careerOverviewWrapperDom.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    handleScroll() {
      const container = document.querySelector(".careerOverviewWrapper");
      if (container) {
        var top = container.scrollTop || document.body.scrollTop;
        this.scrollToTopBtn = top > 400;
      }
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .careerOverviewWrapper {
  max-height: unset;
}
@keyframes popupAnimation {
  0% {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
.all {
  position: relative;
  background: #f7f8fa;
  height: 100%;
  min-width: 1190px;
  overflow-x: hidden;
}
#top {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 57px;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(7px);
  background-size: 100% 57px;
  z-index: 2;
  .title-container {
    display: flex;
    align-items: center;
    padding-left: 25px;
    color: #fff;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 2px;
    .title {
      font-family: "title-home-font";
      cursor: pointer;
    }
    img {
      height: 24px;
      width: auto;
      cursor: pointer;
    }
  }
  .mine {
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
    .avator {
      height: 24px;
      width: 24px;
      margin: 0 24px 0 8px;
      border-radius: 50%;
      overflow: hidden;
    }
  }
}
.main {
  height: 100%;
  position: relative;
  // border-radius: 20px;
  // margin-top: 24px;
  background-color: white;
  // margin-left: 24px;
  // margin-right: 24px;
  // width: 100%;
  // width: calc(100vw - 48px);
  min-width: 100vw;
  overflow-x: hidden;
  // min-height: 95vh;
  display: flex;
  flex-direction: column;
  // min-width: 1000px;
  .topNavi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 16px;
    .topNaviItem {
      display: flex;
      align-items: center;
    }
    .topNaviItemRight {
      display: flex;
      align-items: center;
      padding-right: 65px;
    }
    .backBtn {
      width: 36px;
      height: 36px;
      margin-right: 16px;
      img {
        width: 36px;
        height: 36px;
      }
    }
    .naviPositionName {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #222222;
      line-height: 28px;
    }
    .fatherTitleName {
      margin-left: 10px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }
    .collect {
      cursor: pointer;
      padding: 4px 10px;
      border-radius: 110px;
      background: rgba(244, 93, 93, 1);
      display: flex;
      color: #fff;
      align-items: center;
      font-size: 14px;
      margin-left: 16px;
      img {
        width: 14px;
        height: 14px;
      }
      p {
        margin: 0;
        margin-left: 5px;
        margin-top: 2px;
      }
    }
    .collected {
      background: rgba(204, 204, 204, 1);
    }
  }
  .mainContent {
    display: flex;
    flex: 1;
    width: 100%;
    min-width: 1375px;
  }
}
#app-container {
  width: 100%;
  display: flex;
  background: url("../../assets/home/back.png") no-repeat;
  flex-direction: column;
  background-size: 100.1% auto;
  align-items: center;
  min-width: 1375px;
}

::v-deep .el-menu {
  width: 175px;
  border-right: 0px;
  background: #f5f5f5;
}
::v-deep .el-menu-item {
  padding-left: 60px !important;
  padding: 0;
  min-width: 145px;
  height: 41px;
  line-height: 41px;
  color: #999999;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}
::v-deep .el-submenu__title {
  height: 41px;
  font-size: 16px;
  line-height: 41px;
  padding-left: 16px !important;
  color: #999999;
  background: #fff;
  // overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
::v-deep .el-menu-item.is-active {
  color: #0b6eff;
}
::v-deep .el-submenu.is-active > .el-submenu__title {
  color: #fff;
  padding-left: 9px !important;
  margin-left: 12px;
  background: #0b6eff;
  border-radius: 8px;
  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 41px;
    background: #0b6eff;
    position: absolute;
    left: -12px;
    border-radius: 8px;
  }
  .el-icon-arrow-down:before {
    color: #fff;
  }
}
.listInner {
  height: 100%;
  width: 100%;
}
.menu {
  width: 175px;
  height: 100%;
  // border-right: 1px solid #e8e8e8;
}

#list {
  font-size: 15px;
  padding-top: 20px;
  position: relative;
  flex: 1;
  height: 100%;
  padding-right: 160px;
}
.demo-autocomplete {
  padding-bottom: 46px;
}
.scrollToTop {
  position: fixed;
  width: 48px;
  height: 48px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  bottom: 40px;
  right: 210px;
  z-index: 99;
  background: #fff;
  font-size: 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bold;
  color: #747680;
  line-height: 14px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  animation: popupAnimation 0.5s forwards;
  cursor: pointer;
  .top-icon {
    width: 16px;
    height: 16px;
    background-image: url("../../assets/detail/icon_top_gray.png");
  }
  .small {
    transform: scale(0.9);
    font-weight: 900;
  }
}
.scrollToTop:hover {
  background-color: #076afe;
  color: #fff;
  .top-icon {
    width: 16px;
    height: 16px;
    background-image: url("../../assets/detail/icon_top_white.png");
  }
}
.positionName {
  display: flex;
  width: 100%;
  align-items: center;
  color: #333333;
  // background-color: #edf6ff;
  height: 1px;
  font-size: 18px;
  font-weight: bold;
  margin-left: -20px;
  z-index: 99;
}
.switchBtn {
  float: right;
  right: 90px;
  top: 20px;
  // width: 80px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #dbe0e7;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #888888;
  line-height: 20px;
  background: #fff;
}
.downloadBtn {
  margin-right: 15px;
}
.active {
  background: #076afe;
  color: #fff;
  border-color: #076afe;
}
.dot-ani {
  display: inline-block;
  height: 12px;
  line-height: 12px;
  overflow: hidden;
}
.dot-ani::after {
  display: inline-table;
  white-space: pre;
  content: "\A.\A..\A...";
  animation: spin 2s steps(4) infinite;
}
@keyframes spin {
  to {
    -webkit-transform: translateY(-48px);
    transform: translateY(-48px);
  }
}
.disabledSave {
  margin-left: 15px;
  margin-right: 20px;
  width: 80px;
}
.controlLine {
  display: flex;
  justify-content: flex-start;
  // align-items: center;
  margin-bottom: 12px;
  .tinyTitle {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    // margin-right: 24px;
  }
  .line {
    flex: 1;
    height: 16px;
    margin-left: 14px;
    border-bottom: 1px solid #efefef;
  }
  .saveBtns {
    display: flex;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding-right: 10px;
    .contentItemEditAndAIBtn {
      line-height: 32px;
      margin: 0 10px 0 15px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #888888;
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        width: 22px;
        height: 22px;
      }
    }
  }
  .AILoading {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 0px;
      height: 100%;
      background-color: transparent;
      animation-name: ellipsis;
      animation-duration: 1.5s;
      animation-iteration-count: infinite;
    }
  }
}
@keyframes ellipsis {
  from {
    width: 20px; /* 省略号宽度为0，不可见 */
    background-color: #fff; /* 省略号颜色透明 */
  }
  to {
    width: 0px; /* 省略号宽度为30px，可见 */
    background-color: #fff; /* 省略号颜色为黑色 */
  }
}
.saveAllBtn {
  width: 57px;
  height: 26px;
  border: none;
  background: #4880ff;
  color: #ffffff;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  border-radius: 4px;
  margin-left: 15px;
  margin-right: 20px;
}
.aiContent {
  flex: 1;
  height: 100%;
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #555555;
  line-height: 27px;
  // max-width: 90%;
  word-break: break-all;
  white-space: normal;
  padding-right: 36px;
}
// .aiExtendContent {
//   line-height: 28px;
//   color: #1677db;
//   margin-top: 28px;
//   word-break: break-all;
//   white-space: normal;
//   width: 50%;
// }
.editBox {
  width: 100%;
  display: flex;
  padding-right: 20px;
  .editBoxLeft {
    flex: 1;
    position: relative;
    border: 1px solid #709cff;
    .deleteContent {
      position: absolute;
      cursor: pointer;
      right: 12px;
      top: 15px;
    }
  }
  .editBoxRight {
    flex: 1;
    padding: 12px 16px 0px 16px;
    background: #f5f9ff;
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4b6aaf;
    line-height: 27px;
    position: relative;
    padding-bottom: 35px;
    .extendsItem {
      position: relative;

      .replaceByOne {
        display: flex;
        justify-content: flex-end;
        position: relative;
        bottom: 13px;
        right: 14px;
        cursor: pointer;
        color: #4880ff;
      }
    }
  }
  .noEdit {
    padding: 0;
    background: transparent;
  }
}
::v-deep .el-tabs__content {
  border-left: 1px solid #e8e8e8;
  padding-left: 36px;
}
::v-deep.el-tabs--left .el-tabs__header.is-left {
  margin-right: 0;
}
::v-deep.el-tabs--left .el-tabs__item.is-left {
  text-align: left;
}
::v-deep .el-submenu__title > span {
  padding-left: 20px;
}
::v-deep .el-tabs__item {
  height: 48px;
}
.search-box {
  margin-top: 8px !important;
  width: auto !important;
}

::v-deep .el-textarea__inner {
  padding: 12px 40px 17px 12px;
  font-size: 15px;
  line-height: 27px;
  // min-height:200px !important;
}
textarea {
  resize: none;
}
.titleFlag {
  width: 5px;
  height: 15px;
  border-radius: 32px;
  background-color: #409eff;
  margin-right: 12px;
  color: red;
}
.scroller {
  width: 152px;
  height: calc(100vh - 150px);
  right: 30px;
  top: 143px;
  color: #bfbfbf;
  font-size: 14px;
  line-height: 20px;
  position: fixed;
  border-left: 1px solid #eaedf7;
  .wrap {
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
  }
  .rightNavi {
    position: relative;
    display: flex;
    // height: calc(100vh - 470px);
    // flex: 1;
    overflow-y: auto;
    .navDot {
      width: 0;
      height: 0;
      margin-top: 10px;
      border-left: 8px solid #0b6eff;
      border-bottom: 8px solid transparent;
      border-top: 8px solid transparent;
      transition: margin-top 0.1s ease-in-out;
    }
    .selectedNav {
      color: #0b6eff;
    }
    .editedNav {
      color: #44d184;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        left: -15px;
        top: 7px;
        width: 4px;
        height: 5px;
        background: #44d184;
        border-radius: 50%;
      }
    }
  }
  .editStatistics {
    flex-shrink: 0;
    // position: absolute;
    // bottom: 0;
    width: 100%;
    // height: 298px;
    margin: 8px 0px 0px 0;
    background-image: linear-gradient(160deg, #e0ebfd 0%, #fff 20%, #fff 100%);
    border: #f5f5f5 1px solid;
    .grey {
      color: #a2a5b3;
      font-size: 13px;
      display: flex;
      align-items: center;
    }
    .editContentText {
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #555555;
      line-height: 22px;
    }
    .huizhang {
      width: 16px;
      height: 16px;
      margin-left: 3px;
    }
    .historyTitle {
      width: 97px;
      height: 20px;
      font-size: 14px;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: 800;
      color: #076afe;
      line-height: 20px;
      margin-left: 18px;
      margin-top: 12px;
    }
    .aditContent {
      margin: 6px 0 10px 18px;
    }
  }
}
.scrollerFlex {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin: 8px 12px;
  border: 10px;
  .title {
    display: flex;
    align-items: center;
    color: #bfbfbf;
  }
  .online {
    color: #555555;
  }
  .menuEditState {
    width: 20px;
    height: 20px;
  }
}

#content {
  color: #222222;
  font-size: 13px;
  font-family: PingFangSC-Regular;
  display: block;
  flex: 1;
  overflow-y: auto;
  min-height: calc(100vh - 150px);
  min-width: 1200px;
  overflow-x: scroll;
  // border-left: 1px solid #eaedf7;
  &::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
    border-radius: 4px;

    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #d8d8d8;
    border-radius: 4px;
  }
}
.menuIcon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-bottom: 3px;
  line-height: 16px;
}

.scrollerFlex:hover {
  color: #409eff;
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 4px;
  background-color: #fff;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: #d8d8d8;
  border-radius: 4px;
}
::v-deep .el-textarea__inner::-webkit-scrollbar {
  width: 5px;
  background-color: #fff;
  border-radius: 4px;
}
::v-deep .el-textarea__inner::-webkit-scrollbar-thumb {
  background-color: #d8d8d8;
  border-radius: 4px;
}
::v-deep .el-textarea {
  height: 100%;
  textarea {
    //   // height:100% !important;
    border: none;
  }
}
// ::v-deep .el-textarea {
//   max-width: 900px;
// }
::v-deep .el-table {
  max-width: 73%;
}
::v-deep .el-submenu__title > span {
  padding-left: 0;
}
button:focus {
  outline: none;
}
button:hover {
  cursor: pointer;
}
::v-deep .el-date-editor .el-range-input {
  color: #999999;
  background-color: #fafcfe;
}
::v-deep .el-range-editor--small .el-range__icon {
  display: none;
}
</style>
